<template>
  <div>
    <!--头部-->
    <div>
      <van-nav-bar :fixed="true">
        <template #left>
          <span class="left-arrow" @click="backBtn"><</span>
          <van-search
              v-model="inputSchoolName"
              show-action
              label="学校"
              placeholder="请输入搜索关键词"
              @search="onSearch"
          >
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>
        </template>
      </van-nav-bar>
    </div>
    <!--院校列表-->
    <div class="custom-list" style="height: 100vh;overflow: scroll">
      <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          :offset="offset"
          :finished-text="uniList.length > 0 ? '没有更多了' : '暂无数据'"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
      >
        <van-cell
            is-link
            v-for="u in uniList"
            :key="u.id"
            :to="{
              name:'UniDetail',
              params:{
                uniId:u.id,
                status:1,
                uniName:u.name
              }
            }"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">{{ u.name }}</span>
            <van-tag type="primary">{{ u.typeName }}</van-tag>
            <van-tag v-if="u.sort <= 20" class="custom-sort" type="warning">985</van-tag>
            <van-tag v-if="u.sort <= 30" class="custom-sort" type="warning">211</van-tag>
          </template>
          <!-- 使用 label 插槽来自定义标题 -->
          <template #label>
            <span class="custom-label">{{ u.regionName }}</span>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>

</template>

<script>

export default {
  name: "UniversityList",
  data() {
    return {
      inputSchoolName: '',
      uniList: [],
      loading: false,
      finished: false,
      error: false,
      offset: 0,
    }
  },
  methods: {
    //返回按钮
    backBtn() {
      this.$router.back()
    },
    //列表加载
    onLoad() {
      const list = this.$store.state.uniList
      if (list != null) {
        this.uniList = list
        this.$store.dispatch('giveUniList', null)
        // 加载状态结束
        this.loading = false;
        this.finished = true;
        return
      }
      // 异步更新数据
      this.request.get('/api/university/selectByName', {
        params: {
          name: this.inputSchoolName
        }
      }).then(res => {
        if (res.code === 1) {
          this.uniList = res.data
          // 加载状态结束
          this.loading = false;
          this.finished = true;
        } else {
          this.error = true;
        }
      })
    },
    //模糊搜索
    onSearch() {
      this.request.get('/api/university/selectByName', {
        params: {
          name: this.inputSchoolName
        }
      }).then(res => {
        //查询到院校的信息，路由跳转，组件之间实现数据共享
        this.uniList = res.data
      })
    },
  },
}
</script>

<style scoped>
.left-arrow {
  color: #1989fa;
}

.custom-list {
  margin-top: 40px;
}

.custom-sort {
  margin-left: 5px;
}
</style>